<template>
	<view>
		<navbar :config="config" backColor="#000"></navbar>
		<view class="page-content">
			<view id="qrcode">
			</view>
			<view class="boxView">
				<view class="text-box">
					<!-- <text class="u-bold">主网</text> -->
					<!-- <view class="text-margin"></view> -->
					<!-- <view>
					<text class="input_value">{{mainNet}}</text>
				</view> -->
					<text class="titleView">转入地址</text>
					<!-- <view class="text-margin"></view> -->
						<view class="input_value">{{
						address
					}}</view>
					<view class="usable-btn" @click.stop="getDetail(address)">
						保存并分享地址
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		accountAddress,
		transfer_net
	} from '@/api/bnb.js'
	// import QRCode from 'qrcodejs2'
	export default {
		// components: {
		// 	QRCode
		// },
		data() {
			return {
				mainNet: '',
				address: '',
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '转入积分',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000"

				},
			};
		},
		mounted() {
			this.initPage()
			// 简写方式使用
		},
		methods: {
			async initPage() {
				const res1 = await this.$http.get(accountAddress)
				const res2 = await this.$http.get(transfer_net)

				this.address = res1.data.account_address

				this.mainNet = res2.data[0].value

				// const qrcode = new QRCode("qrcode", this.address);
				// console.log(res1, res2)
			},

			getDetail(info) {
				uni.showModal({
					content: info, //模板中提示的内容
					confirmText: '复制内容',
					confirmColor: 'red',
					cancelColor: '#474747',
					success: (res) => { //点击复制内容的后调函数
						if (res.confirm) {
							let result
							// #ifndef H5
							//uni.setClipboardData方法就是讲内容复制到粘贴板
							uni.setClipboardData({
								data: info, //要被复制的内容
								success: () => { //复制成功的回调函数
									uni.showToast({ //提示
										title: '复制成功'
									})
								}
							});
							// #endif

							// #ifdef H5 
							let textarea = document.createElement("textarea")
							textarea.value = info
							textarea.readOnly = "readOnly"
							document.body.appendChild(textarea)
							textarea.select() // 选中文本内容
							textarea.setSelectionRange(0, info.length)
							uni.showToast({ //提示
								title: '复制成功'
							})
							result = document.execCommand("copy")
							textarea.remove()
							// #endif
						} else {
							console.log('取消')
						}
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "~../common.scss";

	.page-content {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
		align-items: center;
		padding-top: 50rpx;
	}

	.text-box {
		// width: 80%;
		// border-radius: 20rpx;
		// padding: 52rpx 60rpx;
		// margin: 52rpx;
		background-color: #fff;
		color: #474747;
		.titleView{
			font-weight: 600;
			font-size: 31rpx;
			color: #333333;
			margin-bottom: 19rpx;
			
		}

		.input_value {
			color: #AAAAAA;
			margin-top: 19rpx;
			font-weight: 400;
			font-size: 31rpx;
			color: #999999;
			width: 635rpx;
			height: 62rpx;
			// line-height: 62rpx;
		}

		.text-divider {
			margin: 30rpx 0;
		}

		.text-margin {
			margin: 10rpx 0;
		}
	}

	.usable-btn {
		text-align: center;
		font-weight: 500;
		font-size: 29rpx;
		color: #FFFFFF;
		width: 635rpx;
		height: 85rpx;
		background: #FF211F;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 87rpx;
		
		
	}
	.boxView{
		width: 712rpx;
		height: 358rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		padding-left:38rpx;
		padding-top: 38rpx;
		box-sizing: border-box;
	}
	/deep/.uni-modal__btn_primary{
		color:#FF211F;
	}
</style>